<script setup>
import {onMounted,reactive }  from 'vue';
import { Head, Link } from '@inertiajs/inertia-vue3';
import {all,broadcast} from '../Api/index.js';

defineProps({
    canLogin: Boolean,
    canRegister: Boolean,
    laravelVersion: String,
    phpVersion: String,
});

onMounted(()=>{
    all().then(res=>{
        console.log(res);
    })
})
const handleBroadcast = ()=>{
    broadcast({msg:form.message});
}
const form = reactive({
  first_name: null,
  last_name: null,
  email: null,
  message:''
})

const submit = ()=>{

}
</script>

<template>
    <Head title="Welcome" />
  
    <div
        class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0"
    >
        <div v-if="canLogin" class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
            <Link
                v-if="$page.props.auth.user"
                :href="route('dashboard')"
                class="text-sm text-gray-700 dark:text-gray-500 underline"
                >Dashboard</Link
            >

            <template v-else>
                <Link :href="route('login')" class="text-sm text-gray-700 dark:text-gray-500 underline">Log in</Link>

                <Link
                    v-if="canRegister"
                    :href="route('register')"
                    class="ml-4 text-sm text-gray-700 dark:text-gray-500 underline"
                    >Register</Link
                >
            </template>
        </div>
        <figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
            <div class="bro-message">
                <p>最新消息</p>

                <div>
                    <textarea v-model="form.message">输入内容</textarea>
                </div>
                <div>
                    <button type="submit" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150 ml-4" @click="handleBroadcast">发消息</button>
                </div>
            </div>
            </figure>
     
       
    
    </div>
</template>
